<template>
    <div class="app-container">
        <div class="top-title">
            <el-radio-group v-model="selectRadio">
                <el-radio-button label="0">全部跟进记录</el-radio-button>
                <el-radio-button label="1">我的跟进记录</el-radio-button>
                <el-radio-button label="2">下属的跟进记录</el-radio-button>
            </el-radio-group>
        </div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="跟进日期" style="margin-right: 40px">
                <el-date-picker type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="跟进人" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="经销商姓名" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="经销商电话" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="跟进人战队" style="margin-right: 40px">
                <el-select>
                    <el-option />
                </el-select>
            </el-form-item>
            <el-form-item label="跟进形式" style="margin-right: 40px">
                <el-select>
                    <el-option />
                </el-select>
            </el-form-item>
            <el-form-item label="跟进内容关键字" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item style="margin-right: 40px">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="button-table">
            <el-button type="primary" size="mini" class="button-item" @click="addFollowUp">新增跟进记录</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="date" label="类别" fixed :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="跟进日期" fixed :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="跟进人" fixed :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="跟进人战队" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="经销商电话" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="经销商姓名" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="跟进项目" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="跟进形式" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="跟进内容" :align="tableAlign" show-overflow-tooltip width="350">
            </el-table-column>
            <el-table-column prop="name" label="创建时间" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="操作" fixed="right" width="280" :align="tableAlign">
                <template slot-scope="scope">
                    <el-button type="text" @click="updateItem">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <el-dialog :title="dialogTitle" :visible.sync="addDialogVisible" width="600px">
            <add></add>
        </el-dialog>
    </div>
</template>

<script>
  import add from "./add.vue";
  export default {
    components: {
      add,
    },
    data() {
      return {
        addDialogVisible:false,
        dialogTitle:'新增',
        tableAlign: "center",
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
        selectRadio: "1",
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
      };
    },
    methods: {
    addFollowUp(){
        this.addDialogVisible=true
    },
    updateItem(){
        this.addDialogVisible=true
    },
      getList() {},
      handleQuery() {},
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.pageNum = 1;
      },
    },
  };
  </script>

<style lang="scss" scoped>
.app-container {
    .top-title {
        margin-bottom: 20px;
    }

    .button-table {
        margin-bottom: 20px;
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }
}
</style>